<!DOCTYPE html>
<html lang="en"  class="no-js">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#--<#include "common.ftl" />-->
    <!-- CSS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="${ticket.contextPath}/static/web/css/reset.css">
    <link rel="stylesheet" href="${ticket.contextPath}/static/web/css/supersized.css">
    <link rel="stylesheet" href="${ticket.contextPath}/static/web/css/style.css">
    <link rel="stylesheet" href="${ticket.contextPath}/static/common/css/animate.css">
</head>
<body>
    <div class="page-container">
        <h1>Login</h1>

        <form id="login">
            <span id="errorMsg" style="color: red;display: none;font-family: 'Microsoft YaHei'">
            </span>
            <input id="username" type="text" name="userName" class="username" placeholder="Username">
            <input id="password" type="password" name="password" class="password" placeholder="Password">
            <div class="error"><span>+</span></div>
        </form>
        <button onclick="login()">登录</button>
        <div class="connect">
            <p>第三方登录(维护中):</p>
            <p>
                <a class="facebook" href=""></a>
                <a class="twitter" href=""></a>
            </p>
        </div>
    </div>

    <div id="slideDown" style="position: absolute;bottom: 0px;right: 0px;z-index: 1000;width: 100px;" onclick="toRegister()">
        <img src="${ticket.contextPath}/static/web/img/balloon.png" style="width: 100%;" >
        <span style="position: relative;top: -35px;left:0px;font-size: 10px;">注册</span>
    </div>
    <!-- Javascript -->
    <script src="${ticket.contextPath}/static/common/js/jquery.min.js"></script>
    <script src="${ticket.contextPath}/static/web/js/supersized.3.2.7.min.js"></script>
    <script src="${ticket.contextPath}/static/web/js/supersized-init.js"></script>
<script>
    $(function() {
        /*loginToken = $.cookie('loginToken');
        if(!loginToken){
            window.location.href = "/web/page/auth";
        }*/
        $('.page-container form .username, .page-container form .password').keyup(function(){
            $(this).parent().find('.error').fadeOut('fast');
        });
    })
    function login(){
        var username = $("#username").val();
        var password = $("#password").val();
        if(username == '') {
            console.log("用户名空")
            $('.error').fadeOut('fast', function(){
                $(".error").css('top', '27px');
            });
            $('.error').fadeIn('fast', function(){
                $('.username').focus();
            });
            return false;
        }
        if(password == '') {
            $('.error').fadeOut('fast', function(){
                $(".error").css('top', '96px');
            });
            $('.error').fadeIn('fast', function(){
                $('.password').focus();
            });
            return false;
        }

        var url="/web/api/auth";
        $.ajax({
            type:'POST',
            url:url,
            processData:false,
            cache: false,
            contentType: "application/x-www-form-urlencoded",
            data : $("#login").serialize(),
            success:function(data){
                if(data!=null){
                   document.cookie = "loginToken="+data.token
                   document.cookie = "loginKey="+data.randomKey
                    window.location.href = "/web/page/list";
                }
            },
            error:function(err){
                var json = JSON.stringify(err)
                var ss = JSON.parse(json)
                var msg = JSON.parse(ss.responseText)
                $("#errorMsg").css("display","block")
                $("#errorMsg").append(msg.message)

            }
        })
    }

    function toRegister() {
        $("#slideDown").addClass('animated slideOutUp');

        setTimeout(function () {
            window.location.href = "/web/page/register";
            $("#slideDown").removeClass('slideOutUp');
        },1500)
    }
</script>

</body>
</html>